{% extends "base.html" %}
{% load staticfiles %}
{% load crispy_forms_tags %}

{% block title %}
Search by tags
{% endblock %}

{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{% static "js-custom-themes/selectize/css/selectize.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "bower_components/nprogress/nprogress.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "js-custom-themes/selectize/css/selectize.resrc.css" %}" />
{% endblock %}

{% block breadcrumb %}
<li><a href="{% url "home" %}">Home</a></li>
<li><a href="{% url "tag-index" %}">Tags</a></li>
<li class="current">Search</li>
{% endblock %}

{% block content %}
<div class="row">
  <div class="large-12 columns">
    <h1 id="query">Search by tags</h1>
  </div>
</div>

<div class="row">
  <div class="medium-2 columns">
    <div class="switch">
      <input name="op" id="op-or" value="or" type="radio"{% if sop != 'and' %} checked="checked"{% endif %}>
      <label for="x" onclick="">Or</label>

      <input name="op" id="op-and" value="and" type="radio"{% if sop == 'and' %} checked="checked"{% endif %}>
      <label for="x1" onclick="">And</label>

      <span></span>
    </div>
  </div>
  <div class="medium-10 columns">
    <input type="text" id="selected-tags" value="{{ stags }}" placeholder="Start entering tags" />
  </div>
</div>

<div class="row">
  <div class="medium-2 columns">
    <label for="excluded-tags" class="inline">
      exclude tags :
    </label>
  </div>
  <div class="medium-10 columns">
    <input type="text" id="excluded-tags" value="{{ sex }}" placeholder="Start entering tags" />
  </div>
</div>


<div class="row">
  <div class="large-12 columns">
    <h1>Search in links</h1>

    <form method="get" action="/search/" class="large-12 columns">
      <input id="id_q" name="q" type="text" value="{{ query }}">
      <input type="submit" value="Search" class="submit button small button">
    </form>
  </div>
</div>

<div class="row" id="results">
  <div class="large-6 columns">
    <h4>Links</h4>
    <div id="link_results"></div>
  </div>
  <div class="large-6 columns">
    <h4>Lists</h4>
    <div id="list_results"></div>
  </div>
</div>

{% endblock %}

{% block last_body %}
<script>
  window._gaq_page_name = 'Searchpage';
  window.tags = {{ tags_json|safe }};
</script>
<script src="{% static "bower_components/selectize/dist/js/standalone/selectize.min.js" %}"></script>
<script src="{% static "bower_components/nprogress/nprogress.js" %}"></script>
<script src="{% static "js/search.js" %}"></script>
<script>
  $(function () {
    // TODO: use selectize event
    if (!($('#selected-tags').val() || $('#excluded-tags').val())) {
      $('#selected-tags').siblings('.selectize-control').find('input').focus();
    }
  });
</script>
{% endblock last_body %}
